<template>
  <!-- 项目的最外层 -->
  <div class="outer">
    <!-- 头部 -->
    <header class="header">
      <!-- 头部的第一行 -->
      <div class="top">
        <div class="container">
          <div class="loginList">
            <p>尚品汇欢迎您！</p>
            <p v-if="!userInfo.id">
              <span>请</span>
              <router-link to="/login">登录</router-link>
              <router-link to="/register" class="register">免费注册</router-link>
              <router-link to="/test" class="register">测试</router-link>
            </p>

            <p v-else>
              <span>欢迎, </span>
              <span>{{ userInfo.name }}</span>
              <span class="" @click="logOff"> 退出登录</span>
            </p>
          </div>
          <div class="typeList">
            <router-link to="/center">我的订单</router-link>
            <router-link to="/shopcart">我的购物车</router-link>
            <a href="###">我的尚品汇</a>
            <a href="###">尚品汇会员</a>
            <a href="###">企业采购</a>
            <a href="###">关注尚品汇</a>
            <a href="###">合作招商</a>
            <a href="###">商家后台</a>
          </div>
        </div>
      </div>
      <!--头部第二行 搜索区域-->
      <div class="bottom">
        <h1 class="logoArea">
          <!-- target="_blank" -->
          <router-link class="logo" title="尚品汇" to="/">
            <img src="@/assets/image/logo.png" alt="" @click="keyword = ''" />
          </router-link>
        </h1>
        <div class="searchArea">
          <form action="###" @submit.prevent class="searchForm">
            <!-- 在输入框按下回车,会触发 form 的默认提交操作 -->
            <!-- 绑定一个 keyup事件,让按下回车键之后触发事件 -->
            <!-- 并 阻止form表单的默认提交行为  @submit.prevent-->
            <input
              type="text"
              id="autocomplete"
              class="input-error input-xxlarge"
              v-model.trim="keyword"
              @keyup.enter="toSearch"
            />
            <button class="sui-btn btn-xlarge btn-danger" type="button" @click="toSearch">搜索</button>
          </form>
        </div>
      </div>
    </header>
  </div>
</template>

<script>
// 导入辅助函数
import { mapState } from 'vuex'
// 导入 退出登录的 API
// import { reqPassport } from '@/api/login'

// import { removeToken } from '@/utils/storage'
export default {
  data() {
    return {
      keyword: ''
    }
  },
  name: 'SphFouter',
  methods: {
    // 跳转到 搜索页面
    // 方法前面报错误，这个错误的原因并不是代码写错了，而是 Eslint 和 Prettier 格式化的风格出现冲突
    // Eslint 希望加空格，Prettier 不希望加空格，将 Eslint 这个规则禁用调用
    toSearch(e) {
      // 使用编程时导航点击一次没有任何问题,但是当点击多次就会出现问题,就会报错误
      // 原因：是 push 方法内部使用了 Promise，要求需要指定成功或者错误的回调
      // 解决方案 1. 给 push 新增 .then 方法和 .catch方法
      // this.$router
      //   .push('/search')
      //   .then(() => {})
      //   .catch(() => {})

      // 解决方案 2. 只添加 .catch()方法
      // 或者只添加一个 .catch()方法也可以,但是单独添加 .then()方法不行
      // catch 方法才是频繁跳转以后，会触发的回调，在路由内部做了处理，只要频繁跳转，就会触发 catch
      // this.$router.push('/search').catch(() => {})

      // 解决方案 3. 添加第二个和第三个参数.第二个第三个参数就是处理成功和失败的回调函数
      //
      // this.$router.push(=
      //   '/search',
      //   () => {},
      //   () => {}
      // )

      // 第二个参数和第三个参数可以省略一个,也不会报错
      // this.$router.push('/search', () => {})
      // this.$router.push('/search')

      // 携带参数并跳转到 搜索页面
      this.$router.push({
        path: '/search',
        query: {
          // 代码优化, 如果用户之间点击搜索并没有任何关键字
          // 允许跳转到 search 页面,但是不能携带一个空的参数
          // 所以多设置一个undefined,如果用户没有写任何关键字就将 undefined 赋值给 keyword
          ...this.$route.query,
          keyword: this.keyword || undefined
        }
      })
      // e.target.value = ''
    },

    // 点击退出登录
    async logOff() {
      // const res = await reqPassport()
      // // console.log(res)
      // if (res.code === 200) {
      //   // 清除本地token
      //   removeToken()
      //   // 清除用户信息
      //   // this.$store.state.user.userInfo = ''
      //   //
      //   this.$store.commit('user/emptyUserInfo', {})
      //   // 提示用户退出成功
      //   this.$message({
      //     message: '退出成功',
      //     type: 'success'
      //   })
      //   // 并跳转到登录组件
      //   this.$router.push('/login')
      // }

      this.$store.dispatch('user/getPassport', '退出成功')
    }
  },
  mounted() {
    // 接收传递过来的事件
    this.$eventBus.$on('removekeyword', () => {
      this.keyword = ''
    })
  },
  computed: {
    ...mapState('user', ['userInfo'])
  }
}
</script>

<style lang="less" scoped>
.header {
  & > .top {
    background-color: #eaeaea;
    height: 30px;
    line-height: 30px;

    .container {
      width: 1200px;
      margin: 0 auto;
      overflow: hidden;

      .loginList {
        float: left;

        p {
          float: left;
          margin-right: 10px;

          .register {
            border-left: 1px solid #b3aeae;
            padding: 0 5px;
            margin-left: 5px;
          }
        }
      }

      .typeList {
        float: right;

        a {
          padding: 0 10px;

          & + a {
            border-left: 1px solid #b3aeae;
          }
        }
      }
    }
  }
  a {
    cursor: pointer;
  }
  & > .bottom {
    width: 1200px;
    margin: 0 auto;
    overflow: hidden;

    .logoArea {
      float: left;

      .logo {
        img {
          width: 175px;
          margin: 25px 45px;
        }
      }
    }

    .searchArea {
      float: right;
      margin-top: 35px;

      .searchForm {
        overflow: hidden;

        input {
          box-sizing: border-box;
          width: 490px;
          height: 32px;
          padding: 0px 4px;
          border: 2px solid #ea4a36;
          float: left;

          &:focus {
            outline: none;
          }
        }

        button {
          height: 32px;
          width: 68px;
          background-color: #ea4a36;
          border: none;
          color: #fff;
          float: left;
          cursor: pointer;

          &:focus {
            outline: none;
          }
        }
      }
    }
  }
}
</style>
